<template>
    <div class="container">
        <!-- 目录模块，登录的时候显示 -->
        <Menu v-if="login" mode="horizontal" :theme="theme1" active-name="1" @on-select="select">
            <MenuItem name="./">
            <Icon type="home"></Icon>
            返回首页
            </MenuItem>
            <MenuItem name="./menu">
            <Icon type="ios-paper"></Icon>
            分类管理
            </MenuItem>
            <MenuItem name="/config">
            <Icon type="settings"></Icon>
            设置
            </MenuItem>
            <MenuItem name="/page">
            <Icon type="ios-copy-outline"></Icon>
            文章
            </MenuItem>
            <MenuItem name="/goods">
            <Icon type="android-cart"></Icon>
            产品
            </MenuItem>
            <MenuItem name="/ad">
            <Icon type="pricetag"></Icon>
            广告中心
            </MenuItem>
            <MenuItem name="/loginOut">
            <Icon type="ios-people"></Icon>
            退出登录
            </MenuItem>
        </Menu>
        <router-view v-if="login"></router-view>
        <!-- 登录模块，没登录的时候显示 -->
        <div v-if="!login" class="login-container">
            <Card style="width:300px" class="login">
                <p slot="title">
                    <Icon type="person"></Icon>
                    登录
                </p>
                <Input class="input" v-model="username" placeholder="用户名" style="width: 100%"></Input>
                <Input class="input" type="password" v-model="password" placeholder="密码" style="width: 100%"></Input>
                <Button type="primary" long @click="loging">登录</Button>
            </Card>
        </div>
    </div>
</template>
<style lang="less" scoped>
    .container {
        .login-container {
            width: 100%;
            height: 100vh;
            background: url('https://file.iviewui.com/iview-admin/login_bg.jpg');
        }
        .login {
            position: absolute;
            right: 100px;
            top: 400px;
            .input {
                margin-bottom: 10px;
            }
        }
    }
</style>

<script>
    export default {
        data() {
            return {
                theme1: 'primary',
                login: false,
                username: '',
                password: ''
            }
        },
        methods: {
            /**
            * @function 登录
            */
            loging: function () {
                let that = this
                this.$axios.post(this.$api+'/api/admin/login', {
                        type: 'login',
                        member_id: that.username,
                        member_pass: that.password
                    }, {
                        headers: {
                            'Access-Control-Request-Method': 'Origin'
                        },
                        withCredentials: true
                    })
                    .then(function (response) {
                        if (response.data.state == 1) {
                            that.login = true
                            that.$cookie.set('login', true);
                            that.$Notice.success({
                                title: '登录成功',
                                desc: ''
                            });
                        } else {
                            that.$Notice.error({
                                title: '登录失败',
                                desc: ''
                            });
                        }
                    })
                    .catch(function (response) {
                        that.$Notice.error({
                            title: '登录失败',
                            desc: ''
                        });
                    })
            },
            /**
            * @function 点击目录的时候切换，当点击退出登录的时候进行退出操作
            * @param {String} url 选中的目录的地址
            */
            select: function (url) {
                if (url == '/loginOut') {
                    let that = this
                    this.$axios.post(this.$api+'/api/admin/login', {
                            type: 'loginOut',
                            member_id: that.username,
                            member_pass: that.password
                        }, {
                            headers: {
                                'Access-Control-Request-Method': 'Origin'
                            },
                            withCredentials: true
                        })
                        .then(function (response) {
                            if (response.data.state == 1) {
                                that.login = false
                                that.$cookie.set('login', false);
                                that.$Notice.success({
                                    title: '退出成功',
                                    desc: ''
                                });
                            } else {
                                that.$Notice.error({
                                    title: '退出失败',
                                    desc: ''
                                });
                            }
                        })
                        .catch(function (response) {
                            that.$Notice.error({
                                title: '退出失败',
                                desc: ''
                            });
                        })
                } else {
                    this.$router.push(url);
                }
            }
        },
        created: function () {
            this.login = this.$cookie.get('login') == 'true'
        }
    }
</script>